Hands-on Lab: CRUD Application Design using Additional Features in Flask

Estimated time needed: 60 minutes

Overview

CRUD, which stands for Create, Read, Update, Delete, are basic functionalities that any application based on a database must possess. The development of these features requires additional knowledge of handling routes and requests. You also require multiple endpoint HTML interfaces to accommodate different requests. The purpose of this lab, therefore, is to give you some additional practice on the usage of Flask and develop a fully functional, CRUD operation-capable web application.

For this lab, you will develop a financial transaction recording system. The system must be capable of Creating a new entry, Reading existing entries, Updating existing entries, and Deleting existing entries.

Objectives

After completing this lab, you will be able to:

Implement "Create" operation to add transaction entry
Implement "Read" operation to access the list of transaction entries
Implement "Update" operation to update the details of a given transaction entry
Implement "Delete" operation to delete a transaction entry.

After you complete developing the application, it will function as displayed in the animation.

The application has three different web pages. The first one displays all the recorded transactions. This page is called Transaction Records and displays all the transactions entries created in the system. This page also gives an option to Edit and Delete the available entries. The option of adding an entry is also available on this page. The second page is Add Transaction which is used when the user chooses to add the entry on the previous page. The user adds the Date and Amount values for the new entry. The third page is Edit Transaction which is user navigated to upon clicking the edit entry option. On this page also, the date and amount are accepted as entries; however, these entries are then reflected against the ID that was being edited.

Note: This platform is not persistent. It is recommended that you keep a copy of your code on your local machines and save changes from time to time. In case you revisit the lab, you will need to recreate the files in this lab environment using the saved copies from your machines.

Let's get started!

Clone the Project Repository

This lab requires multiple HTML interface files, which have been pre-created for you. You will need to clone the folder structure to the IDE interface using the following command in a terminal shell.

1
git clone https://github.com/ibm-developer-skills-network/obmnl-flask_assignment.git

When the command is successfully executed, the Project tab must have the folder structure as shown in the image. The root folder, obmnl-flask_assignment should have the templates folder and a file app.py. The templates folder has all the required HTML files, edit.html, form.html, and transactions.html. Throughout this lab, you will implement the required functions in app.py.

Initial set up

In the app.py file, you need to import necessary modules from Flask and instantiate the Flask application.
For this lab, you will need to import the following functions from the flask library.

Flask - to instantiate the application
request - to process the GET and POST requests
url_for - to access the url for a given function using its decorator
redirect - to redirect access requests according to requirement
render_template - to render the html page

After importing the functions, instantiate the application to a variable app.

Click here for hint

1
from flask import <functions>

Click here for solution

1
2
3
4
5
# Import libraries
from flask import Flask, redirect, request, render_template, url_for
# Instantiate Flask functionality
app = Flask(__name__)

Now, the code will look like this:
Correct code reference

Next, let's create a list of sample transactions for testing purposes. You can assume that the transactions already exist on the interface when it is executed for the first time. Please note that this step is completely optional and does not affect the functionality you will develop in this lab. Add the code snippet as shown below to app.py.

1
2
3
4
5
6
# Sample data
transactions = [
    {'id': 1, 'date': '2023-06-01', 'amount': 100},
    {'id': 2, 'date': '2023-06-02', 'amount': -200},
    {'id': 3, 'date': '2023-06-03', 'amount': 300}
]

Click here for solution

Sample data

The order in which you will develop the functions is as follows:
1. Read
2. Create
3. Update
4. Delete
The reason to implement Read before the other functions is to be able to redirect to the page with all transactions every time a new transaction is created, updated, or deleted. Therefore, the function to read the existing transactions must exist before the others are implemented.

Create Operation

For the Create operation, you will implement a route that allows users to add new transactions. This will involve handling both GET and POST HTTP requests - GET for displaying the form to the user and POST for processing the form data sent by the user.

Here is the list of steps to implement the Create operation.

Create a function named add_transaction.
Use add as the decorator for this function. Make sure to pass both GET and POST as possible methods.
If the request method is GET, use the render_template function to display an HTML form using a template named form.html. This form will allow users to input data for a new transaction.
If the request method is POST, use request.form to extract the form data, create a new transaction, append it to the transactions list, and then use redirect and url_for to send the user back to the list of transactions.
The new transaction is passed on to the reading function in the following format.

1
2
3
4
5
transation = {
              'id': len(transactions)+1
              'date': request.form['date']
              'amount': float(request.form['amount'])
             }

Here, request.form function parses the information received from the entry made in the form.

Click here for hint

The add_transaction function content needs the following implementations.

For POST method, create the new transaction as shown above, append it to the existing list of transactions and redirect to the URL for Read operation.

For GET method, render the form.html page that accepts the information from the interface.

Click here for solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Create operation: Display add transaction form
# Route to handle the creation of a new transaction
@app.route("/add", methods=["GET", "POST"])
def add_transaction():
    # Check if the request method is POST (form submission)
    if request.method == 'POST':
        # Create a new transaction object using form field values
        transaction = {
            'id': len(transactions) + 1,            # Generate a new ID based on the current length of the transactions list
            'date': request.form['date'],           # Get the 'date' field value from the form
            'amount': float(request.form['amount']) # Get the 'amount' field value from the form and convert it to a float
        }
        # Append the new transaction to the transactions list
        transactions.append(transaction)
        # Redirect to the transactions list page after adding the new transaction
        return redirect(url_for("get_transactions"))
    
    # If the request method is GET, render the form template to display the add transaction form
    return render_template("form.html")

Now, the code will look like this:
Correct code

Note: The statements outside the if case are, by default, the else case. The statements in the if case end with a return statement; hence only one of the two cases will run at a time.

Finishing Steps and Running the Application

Check if the current script is the main program (that is, it wasn't imported from another script) with the conditional if __name__ == "__main__":.

If the condition is true, call app.run(debug=True) to start the Flask development server with debug mode enabled. This will allow you to view detailed error messages in your browser if something goes wrong.

1
2
3
# Run the Flask app
if __name__ == "__main__":
    app.run(debug=True)

Now, the code will look like this:
Correct code reference

The code is now complete. Run the file app.py from a terminal shell using the command:

1
python3.11 app.py

By default, Flask launches the application on LocalHost:5000. As displayed in the image,

Launch the application by going to the Skills Network Library, going to Launch Application.
Enter 5000 in the port number and launch the application window.

The final application looks like this.

ezgif com-video-to-gif

Date	Version	Changed by	Change Description
2023-07-24	2.0	Steve Hord	QA pass with edits
2023-07-15	1.0	Vicky Kuo	Initial version created

Hands-on Lab: CRUD Application Design using Additional Features in Flask

Overview

Objectives

Clone the Project Repository

Initial set up

Read Operation

Create Operation

Update Operation

Delete Operation

Finishing Steps and Running the Application

Lab Help

Testing the Interface

Practice Exercises

Exercise 1: Search Transactions

Exercise 2: Total Balance

Conclusion

Author(s)

Additional Contributor

Changelog

© IBM Corporation 2023. All rights reserved.